<template>
  <div>
    <div class="form">
      <div class="search">
        <div>
          <el-button type="primary" @click="creat()" class="searchBtn">新建章节</el-button>
        </div>
        <div>
          <el-button @click="downLoadQ()" class="searchBtn">模板下载</el-button>
        </div>
      </div>
      <el-table
        class="listTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="序号" prop="id" width="100"  align="center">
          <template slot-scope="row">
            <span>{{ row.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="章节名称">
          <template slot-scope="{row}">
            <span>{{ row.chapter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="章节状态" align="center">
          <template slot-scope="{row}">
            <span>{{ row.statu }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.createBy }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新人"  align="center">
          <template slot-scope="{row}">
            <span>{{ row.updateBy }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序"  align="center">
          <template slot-scope="{row}">
            <span>{{ row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <div class="opt_table">
              <div class="opt_font" @click="preview(row.id)">预览</div>
              <div class="opt_font" @click="edit(row)">编辑</div>
              <div class="opt_font" v-if="row.status == '1'" @click="on(row.id)">上架</div>
              <div class="opt_font" v-if="row.status == '0'" @click="off(row.id)">下架</div>
              <div class="opt_font" @click="upload(row.id)">上传</div>
              <div class="opt_font" @click="outload(row.id)">导出</div>
              <div class="opt_font" @click="remove(row.id)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination 
      :total="total" 
      layout="total, sizes, prev, pager, next" 
      :page-size="limit" 
      :page-sizes="[10, 20, 50, 100]" 
      @size-change="handleSizeChange"
      :current-page.sync="curPage" 
      @current-change="getList($event)" 
      class="sortStyle"/> -->
    </div>
    <el-dialog title="导入表" :visible.sync="showModal" width="800px" top="5vh" append-to-body>
      <div style="display:flex">
        <div style="width:100px;position:relative;top:8px;">章节名称：</div>
        <el-input v-model="name" type="text" auto-complete="off" placeholder="请输入章节名称">
        </el-input>
      </div>
      <div style="display:flex;margin-top: 30px">
        <div style="width:100px;position:relative;top:8px;">排序：</div>
        <el-input v-model="addSort" type="text" auto-complete="off" placeholder="请输入序号">
        </el-input>
      </div>
      <div class="footer">
        <el-button @click="showModal = false">取消</el-button>
        <el-button type="primary" @click="submit()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="uploadMenu" width="648px" height="450px">
      <div class="footers">
        <label for="fileExport" class="uploadBtn">上传名单</label>
        <input type="file" id="fileExport" @change="handleFileChanges_1" ref="inputers_1">
      </div>
    </el-dialog>
    <el-dialog :visible.sync="listShow" width="648px">
      <div class="listStyle" v-for="(item, index) in titleList" :key="item.id">{{ index + 1 }}.{{item.questionName}}</div>
      <div class="btnFooter">
        <el-button
          size="medium"
          @click="close()"
        >
          <span>关闭</span>
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="editShow" width="648px">
      <div class="row center">
        <div class="font">章节名称：</div>
        <div><el-input v-model="editChapter" type="text" placeholder="请输入章节名称"></el-input></div>
      </div>
      <div class="row center">
        <div class="font">当前序号：</div>
        <div><el-input v-model="editSort" type="text" placeholder="请输入序号"></el-input></div>
      </div>
      <div class="footer">
        <el-button @click="editShow = false">取消</el-button>
        <el-button type="primary" @click="editSubmit()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downLoadQ, creatChapter, chapterLIst, chapterDown, chapterUp, chapterDelete, upLoadExampel, downLoadC, chapterPreview, editSave } from "@/api/system/user";
export default {
  components: {
   
  },
  data() {
    return {
      list: [],
      listLoading: false,
      total: 0,
      limit: 10,
      curPage: 1,
      listData: [],
      showModal: false,
      name: '',
      file: '',
      id: '',
      uploadMenu: false,
      courseId: '',
      listShow: false,
      titleList: [],
      editShow: false,
      editInfo: [],
      editChapter: '',
      editSort: '',
      editId: '',
      addSort: '',
    }
  },
  created() {
    
  },
  mounted(){
    this.courseId = this.$route.query.courseId
    this.getList(this.courseId)
  },
  methods: {
    close() {
      this.listShow = false
    },
    edit(val) {
      this.editShow = true
      this.editInfo = val
      this.editId = val.id
      this.editChapter = val.chapter
      this.editSort = val.sort
    },
    editSubmit() {
      this.editShow = false
      let params = {
        id: this.editId,
        chapter: this.editChapter,
        sort: this.editSort
      }
      editSave(params).then(res => {
        if (res.code == '200') {
          this.getList(this.courseId)
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    preview(id) {
      chapterPreview(id).then(res => {
        if (res.code == '200') {
          this.listShow = true
          this.titleList = res.data.question
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    outload(id) {
      let params = {
        chapterId: id,
      }
      downLoadC(params).then(res => {
        let blod = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blod, '消联答题题库')
        } else {
          const link = document.createElement('a')
          document.body.appendChild(link)
          link.style = 'display:none'
          link.href = window.URL.createObjectURL(blod)
          link.download = '消联答题题库'
          link.click()
          link.remove()
          // window.URL.revokeObjectURL(url)
        }
      })
    },
    upload(id) {
      this.uploadMenu = true
      this.id = id
    },
    //上传模板
    handleFileChanges_1(e) {
      let inputDOM = this.$refs.inputers_1
      this.file = inputDOM.files[0];// 通过DOM取文件数据
      this.formData=new FormData();//new一个formData事件
      this.formData.append("file",this.file); //将file属性添加到formData里
      this.formData.append("chapterId	",this.id); 
      this.formData.append("courseId	",this.courseId);
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
      //此时formData就是我们要向后台传的参数了
      upLoadExampel(this.formData).then((res) => {
        this.loading.close();
        e.srcElement.value = ""
        if (res.code == 200) {
          this.uploadMenu = false
          this.$message({message: '上传成功',type: 'success'})
        } else {
          this.$message({message: res.msg,type: 'error'})
        }
      })
    },
    creat() {
      this.showModal = true
      this.name = ''
    },
    remove(id) {
      this.$confirm(
        "是否确认删除？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }
      )
        .then(() => {
          chapterDelete(id).then(res => {
            if (res.code == '200') {
              this.getList(this.courseId)
              this.$message({ message: res.msg, type: "success" });
            } else {
              this.$message({ message: res.msg, type: "error" });
            }
          });
        })
        .catch(() => {});
    },
    off(id) {
      chapterDown(id).then(res => {
        if (res.code == '200') {
          this.getList(this.courseId)
          this.$message({ message: res.msg, type: "success" });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    on(id) {
      chapterUp(id).then(res => {
        if (res.code == '200') {
          this.getList(this.courseId)
          this.$message({ message: res.msg, type: "success" });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handleSizeChange() {

    },
    //列表
    getList(id) {
      chapterLIst(id).then(res => {
        if (res.code == '200') {
          this.list = res.data
          this.list.forEach(element => {
            if (element.status == '0') {
              element.statu = '已上架'
            } else {
              element.statu = '已下架'
            }
          });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    //创建
    submit() {
      var params = {
        chapter: this.name,
        courseId: this.courseId,
        sort: this.addSort
      }
      creatChapter(params).then(res => {
        if (res.code == '200') {
          this.showModal = false
          this.getList(this.courseId)
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    //模板下载
    downLoadQ() {
      downLoadQ().then(res => {
        let blod = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blod, '消联答题题库上传模板')
        } else {
          const link = document.createElement('a')
          document.body.appendChild(link)
          link.style = 'display:none'
          link.href = window.URL.createObjectURL(blod)
          link.download = '消联答题题库上传模板'
          link.click()
          link.remove()
          // window.URL.revokeObjectURL(url)
        }
      })
    },
  }
}
</script>
<style scoped>
  .form {
    padding-left: 26px;
    padding-right: 24px;
    padding-top: 24px;
    background: #fff;
  }
  .search {
    display: flex;
    position: relative;
  }
  .search_info {
    width: 192px;
    height: 40px;
    margin-right: 16px;
  }
  .searchBtn {
    margin-left: 16px;
    height: 36px;
  }
  .sortStyle {
    height: 19px;
    float: right;
    /* right: 24px; */
    margin-top: 20px;
    margin-bottom: 30px;
  }
  .pos_right_btn {
    position: absolute;
    right: 0;
  }
  .opt_font {
    cursor: pointer;
    color: #2e82ff;
  }
 .detail_title {
    font-size: 16px;
    font-weight: 400;
    color: #212121;
    line-height: 22px;
  }
  .detail_title span {
    padding-left: 4px;
    background: #1e88e5;
    margin-right: 12px;
  }
  .row {
    display: flex;
    padding-bottom: 12px;
  }
  .detail_info {
    padding-top: 16px;
  }
  .info_left {
    display:flex;
  }
  .info_right {
    display: flex;
    padding-left: 202px;
  }
  .info_left_title {
    font-size: 14px;
    font-weight: 400;
    color: #616161;
    line-height: 20px;
    width: 112px;
    margin-right: 16px;
  }
  .info_left_content {
    font-size: 14px;
    font-weight: 400;
    color: #212121;
    line-height: 20px;
    width: 150px;
  }
  .pos_top {
    padding-top: 12px;
  }
  .detailTable {
    margin-top: 16px;
  }
  .opt_font {
    color: #1e88e5;
    cursor: pointer;
  }
  .page_pos {
    text-align: right;
    padding-top: 10px;
  }
  .backBtn {
    text-align: center;
    margin-top:10px;
  }
  /deep/ .el-dialog {
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% -30px);
  }
  /deep/ .el-dialog .el-dialog__body {
    /* flex: 1; */
    height: 450px;
    /* overflow: hidden; */
    overflow-y: auto;
  }
  .tab {
    display: flex;
    position: absolute;
    right: 32px;
    top:14px;
  }
  .tab_border {
    border: 1px solid #409EFF;
    color: #409EFF;
    padding:10px 12px;
    font-size: 14px;
    margin-right: 16px;
  }
  .change {
    border: 1px solid #F56C6C;
    color: #F56C6C;
  }
  .listTable {
    margin-top: 17px;
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
  .opt_table {
    display: flex;
    justify-content: space-around;
  }
  .listStyle {
    line-height: 40px;
  }
  .btnFooter {
    display: flex;
    justify-content: center;
  }
  .center {
    justify-content: center;
  }
  .font {
    line-height: 36px;
    align-items: center;
    width: 100px;
    margin-bottom: 20px;
  }
  .center /deep/ .el-input__inner {
    width: 300px;
  }
</style>
